<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="utf-8">

  <!-- PACE Progress Bar START -->
  
    <script src="https://raw.githubusercontent.com/HubSpot/pace/v1.0.2/pace.min.js"></script>
    <link rel="stylesheet" href="https://github.com/HubSpot/pace/raw/master/themes/orange/pace-theme-flash.css">
  
  

  <!-- PACE Progress Bar START -->

  
  <title>datatables.bootstrap.js+pagehelper实现后端分页 | FunGa技术札记</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  
  <meta name="keywords" content="分页">
  
  
  
  
  <meta name="description" content="如果是做一些管理系统，分页是最常见的场景，本文指导如何使用前端的dataTables.bootstrap.js插件和后端的PageHelper分页插件实现后端分页。">
<meta name="keywords" content="分页">
<meta property="og:type" content="article">
<meta property="og:title" content="dataTables.bootstrap.js+PageHelper实现后端分页">
<meta property="og:url" content="funga.cn/2018/02/23/server-page/index.html">
<meta property="og:site_name" content="FunGa技术札记">
<meta property="og:description" content="如果是做一些管理系统，分页是最常见的场景，本文指导如何使用前端的dataTables.bootstrap.js插件和后端的PageHelper分页插件实现后端分页。">
<meta property="og:locale" content="default">
<meta property="og:updated_time" content="2018-12-30T04:52:29.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="dataTables.bootstrap.js+PageHelper实现后端分页">
<meta name="twitter:description" content="如果是做一些管理系统，分页是最常见的场景，本文指导如何使用前端的dataTables.bootstrap.js插件和后端的PageHelper分页插件实现后端分页。">
  
    <link rel="alternate" href="/atom.xml" title="FunGa技术札记" type="application/atom+xml">
  
  <link rel="icon" href="/css/images/favicon.ico">
  
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Montserrat:700" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic" rel="stylesheet" type="text/css">
  <link href="https://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
  <style type="text/css">
    @font-face{font-family:futura-pt;src:url(https://use.typekit.net/af/9749f0/00000000000000000001008f/27/l?subset_id=2&fvd=n5) format("woff2");font-weight:500;font-style:normal;}
    @font-face{font-family:futura-pt;src:url(https://use.typekit.net/af/90cf9f/000000000000000000010091/27/l?subset_id=2&fvd=n7) format("woff2");font-weight:500;font-style:normal;}
    @font-face{font-family:futura-pt;src:url(https://use.typekit.net/af/8a5494/000000000000000000013365/27/l?subset_id=2&fvd=n4) format("woff2");font-weight:lighter;font-style:normal;}
    @font-face{font-family:futura-pt;src:url(https://use.typekit.net/af/d337d8/000000000000000000010095/27/l?subset_id=2&fvd=i4) format("woff2");font-weight:400;font-style:italic;}</style>
    
  <link rel="stylesheet" id="athemes-headings-fonts-css" href="//fonts.googleapis.com/css?family=Yanone+Kaffeesatz%3A200%2C300%2C400%2C700&amp;ver=4.6.1" type="text/css" media="all">
  <link rel="stylesheet" href="/css/style.css">

  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="/css/hiero.css">
  <link rel="stylesheet" href="/css/glyphs.css">
  
    <link rel="stylesheet" href="/css/vdonate.css">
  

  <!-- Custom CSS -->
  <link rel="stylesheet" href="/css/my.css">
  <!-- Google Adsense -->
  
<link rel="stylesheet" href="/css/prism-tomorrow.css" type="text/css"></head>
</html>
<script>
var themeMenus = {};

  themeMenus["/"] = "Home"; 

  themeMenus["/archives"] = "Archives"; 

  themeMenus["/categories"] = "Categories"; 

  themeMenus["/tags"] = "Tags"; 

  themeMenus["/about"] = "About"; 

</script>


  <body data-spy="scroll" data-target="#toc" data-offset="50">


  <header id="allheader" class="site-header" role="banner">
  <div class="clearfix container">
      <div class="site-branding">

          <h1 class="site-title">
            
              <a href="/" title="FunGa技术札记" rel="home"> FunGa技术札记 </a>
            
          </h1>

          
            
          <nav id="main-navigation" class="main-navigation" role="navigation">
            <a class="nav-open">Menu</a>
            <a class="nav-close">Close</a>
            <div class="clearfix sf-menu">

              <ul id="main-nav" class="nmenu sf-js-enabled">
                    
                      <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-1663"> <a class="" href="/">Home</a> </li>
                    
                      <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-1663"> <a class="" href="/archives">Archives</a> </li>
                    
                      <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-1663"> <a class="" href="/categories">Categories</a> </li>
                    
                      <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-1663"> <a class="" href="/tags">Tags</a> </li>
                    
                      <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-1663"> <a class="" href="/about">About</a> </li>
                    
              </ul>
            </div>
          </nav>


      </div>
  </div>
</header>




  <div id="container">
    <div id="wrap">
            
      <div id="content" class="outer">
        
          <section id="main" style="float:none;"><article id="post-server-page" style="width: 66%; float:left;" class="article article-type-post" itemscope="" itemprop="blogPost">
  <div id="articleInner" class="clearfix post-1016 post type-post status-publish format-standard has-post-thumbnail hentry category-template-2 category-uncategorized tag-codex tag-edge-case tag-featured-image tag-image tag-template">
    
    
      <header class="article-header">
        
  
    <h1 class="thumb" itemprop="name">
      dataTables.bootstrap.js+PageHelper实现后端分页
    </h1>
  

      </header>
    
    <div class="article-meta">
      
	Posted on <a href="/2018/02/23/server-page/" class="article-date">
	  <time datetime="2018-02-23T09:53:30.000Z" itemprop="datePublished">February 23, 2018</time>
	</a>

      
	<span id="busuanzi_container_page_pv">
	  本文总阅读量<span id="busuanzi_value_page_pv"></span>次
	</span>

    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <p>如果是做一些管理系统，分页是最常见的场景，本文指导如何使用前端的dataTables.bootstrap.js插件和后端的PageHelper分页插件实现后端分页。</p>
<a id="more"></a>
<p>技术栈：</p>
<ul>
<li>服务端使用SpringBoot开发</li>
<li>使用Mybatis作为ORM框架</li>
<li>使用PageHelper作为后端分页插件</li>
<li>使用Bootstrap作为前端UI框架</li>
<li>使用dataTables.bootstrap.js作为前端分页插件</li>
</ul>
<p>我们需要实现一个展示用户操作日志的分页列表。</p>
<h2 id="后端数据实现"><a href="#后端数据实现" class="headerlink" title="后端数据实现"></a>后端数据实现</h2><p>首先，我们实现根据条件全量查询日志列表</p>
<pre class=" language-java"><code class="language-java"> List<span class="token operator">&lt;</span>UserLog<span class="token operator">></span> <span class="token function">listUserLog</span><span class="token punctuation">(</span>Integer userId<span class="token punctuation">,</span>Integer type<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<pre class=" language-java"><code class="language-java">  <span class="token annotation punctuation">@Override</span>
    <span class="token keyword">public</span> List<span class="token operator">&lt;</span>UserLog<span class="token operator">></span> <span class="token function">listUserLog</span><span class="token punctuation">(</span>Integer userId<span class="token punctuation">,</span>Integer type<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> userLogMapper<span class="token punctuation">.</span><span class="token function">selectAll</span><span class="token punctuation">(</span>userId<span class="token punctuation">,</span>type<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</code></pre>
<p>PageHelper提供了<code>PageInfo</code>类,但是却与前端所需字段不太符合，所以，我们自己实现一个类<code></code>DataTablePageUtil`：</p>
<pre class=" language-java"><code class="language-java"><span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">DataTablePageUtil</span><span class="token operator">&lt;</span>T<span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token comment" spellcheck="true">/*------------------DT自动请求的参数(Sent parameters) begin--------------------*/</span>
    <span class="token comment" spellcheck="true">/*
     * 绘制计数器。这个是用来确保Ajax从服务器返回的是对应的（Ajax是异步的，因此返回的顺序是不确定的）。 要求在服务器接收到此参数后再返回
     */</span>
    <span class="token keyword">private</span> <span class="token keyword">int</span> draw<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 第几次请求</span>
    <span class="token comment" spellcheck="true">/*
     * 第一条数据的起始位置，比如0代表第一条数据
     */</span>
    <span class="token keyword">private</span> <span class="token keyword">int</span> start <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">// 起止位置</span>
    <span class="token comment" spellcheck="true">/*
     * 告诉服务器每页显示的条数，这个数字会等于返回的 data集合的记录数，可能会大于因为服务器可能没有那么多数据。
     * 这个也可能是-1，代表需要返回全部数据(尽管这个和服务器处理的理念有点违背)
     */</span>
    <span class="token keyword">private</span> <span class="token keyword">int</span> length <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 数据长度</span>

    <span class="token comment" spellcheck="true">/*
     * 全局的搜索条件，条件会应用到每一列（ searchable需要设置为 true ）
     */</span>
    <span class="token keyword">private</span> String search<span class="token punctuation">;</span>

    <span class="token comment" spellcheck="true">/*
     * 如果为 true代表全局搜索的值是作为正则表达式处理，为 false则不是。
     * 注意：通常在服务器模式下对于大数据不执行这样的正则表达式，但这都是自己决定的
     */</span>
    <span class="token keyword">private</span> <span class="token keyword">boolean</span> is_search<span class="token punctuation">;</span>

    <span class="token comment" spellcheck="true">/*
     * 告诉后台那些列是需要排序的。 i是一个数组索引，对应的是 columns配置的数组，从0开始
     */</span>
    <span class="token keyword">private</span> <span class="token keyword">int</span><span class="token punctuation">[</span><span class="token punctuation">]</span> order<span class="token punctuation">;</span>

    <span class="token comment" spellcheck="true">/*
     * 告诉后台列排序的方式， desc 降序 asc升序
     */</span>
    <span class="token keyword">private</span> String order_dir<span class="token punctuation">;</span>

    <span class="token comment" spellcheck="true">/*
     * columns 绑定的数据源，由 columns.dataOption 定义。
     */</span>
    <span class="token keyword">private</span> String columns_data<span class="token punctuation">;</span>

    <span class="token comment" spellcheck="true">/*
     * columns 的名字，由 columns.nameOption 定义。
     */</span>
    <span class="token keyword">private</span> String columns_name<span class="token punctuation">;</span>

    <span class="token comment" spellcheck="true">/*
     * 标记列是否能被搜索,为true代表可以，否则不可以，这个是由 columns.searchableOption 控制
     */</span>
    <span class="token keyword">private</span> String columns_searchable<span class="token punctuation">;</span>

    <span class="token comment" spellcheck="true">/*
     * 标记列是否能排序,为 true代表可以，否则不可以，这个是由 columns.orderableOption 控制
     */</span>
    <span class="token keyword">private</span> <span class="token keyword">boolean</span> is_orderable<span class="token punctuation">;</span>

    <span class="token comment" spellcheck="true">/*
     * 标记具体列的搜索条件
     */</span>
    <span class="token keyword">private</span> String columns_search_value<span class="token punctuation">;</span>

    <span class="token comment" spellcheck="true">/*
     * 特定列的搜索条件是否视为正则表达式， 如果为 true代表搜索的值是作为正则表达式处理，为 false则不是。
     * 注意：通常在服务器模式下对于大数据不执行这样的正则表达式，但这都是自己决定的
     */</span>
    <span class="token keyword">private</span> <span class="token keyword">boolean</span> is_search_regex<span class="token punctuation">;</span>

    <span class="token comment" spellcheck="true">/*------------------DT自动请求的参数(Sent parameters) end--------------------*/</span>

    <span class="token comment" spellcheck="true">/*------------------服务器需要返回的数据(Returned data) begin--------------------*/</span>

    <span class="token comment" spellcheck="true">/*
     * 必要。上面提到了，Datatables发送的draw是多少那么服务器就返回多少。
     * 这里注意，作者出于安全的考虑，强烈要求把这个转换为整形，即数字后再返回，而不是纯粹的接受然后返回，这是 为了防止跨站脚本（XSS）攻击。
     */</span>
    <span class="token comment" spellcheck="true">// private int draw;</span>

    <span class="token comment" spellcheck="true">/*
     * 必要。即没有过滤的记录数（数据库里总共记录数）
     */</span>
    <span class="token keyword">private</span> <span class="token keyword">int</span> recordsTotal<span class="token punctuation">;</span>

    <span class="token comment" spellcheck="true">/*
     * 必要。过滤后的记录数（如果有接收到前台的过滤条件，则返回的是过滤后的记录数）
     */</span>
    <span class="token keyword">private</span> <span class="token keyword">int</span> recordsFiltered<span class="token punctuation">;</span>

    <span class="token comment" spellcheck="true">/*
     * 必要。表中中需要显示的数据。这是一个对象数组，也可以只是数组， 区别在于 纯数组前台就不需要用 columns绑定数据，会自动按照顺序去显示
     * ，而对象数组则需要使用 columns绑定数据才能正常显示。 注意这个 data的名称可以由 ajaxOption 的
     * ajax.dataSrcOption 控制
     */</span>
    <span class="token keyword">private</span> List<span class="token operator">&lt;</span>T<span class="token operator">></span> data<span class="token punctuation">;</span>

    <span class="token comment" spellcheck="true">/*
     * 可选。你可以定义一个错误来描述服务器出了问题后的友好提示
     */</span>
    <span class="token keyword">private</span> String error<span class="token punctuation">;</span>

    <span class="token comment" spellcheck="true">/*-------------可选参数-----------------*/</span>

    <span class="token comment" spellcheck="true">/*
     * 自动绑定到 tr节点上
     */</span>
    <span class="token keyword">private</span> String dt_rowId<span class="token punctuation">;</span>

    <span class="token comment" spellcheck="true">/*
     * 自动把这个类名添加到 tr
     */</span>
    <span class="token keyword">private</span> String dt_rowClass<span class="token punctuation">;</span>

    <span class="token comment" spellcheck="true">/*
     * 使用 jQuery.data() 方法把数据绑定到row中，方便之后用来检索（比如加入一个点击事件）
     */</span>
    <span class="token keyword">private</span> Object dt_rowData<span class="token punctuation">;</span>

    <span class="token comment" spellcheck="true">/*
     * 自动绑定数据到 tr上，使用 jQuery.attr() 方法，对象的键用作属性，值用作属性的值。 注意这个 需要 Datatables
     * 1.10.5+的版本才支持
     */</span>
    <span class="token keyword">private</span> Object dt_rowAttr<span class="token punctuation">;</span>

    <span class="token comment" spellcheck="true">/*-------------可选参数-----------------*/</span>
    <span class="token comment" spellcheck="true">/*------------------服务器需要返回的数据(Returned data) end--------------------*/</span>


    <span class="token comment" spellcheck="true">/*
     * 当前页码
     */</span>
    <span class="token keyword">private</span> <span class="token keyword">int</span> page_num <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>

    <span class="token comment" spellcheck="true">/*
     * 每页数据
     */</span>
    <span class="token keyword">private</span> <span class="token keyword">int</span> page_size <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span>


    <span class="token keyword">public</span> <span class="token function">DataTablePageUtil</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

    <span class="token punctuation">}</span>

    <span class="token keyword">public</span> <span class="token function">DataTablePageUtil</span><span class="token punctuation">(</span>HttpServletRequest request<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment" spellcheck="true">//开始的数据行数</span>
        String start <span class="token operator">=</span> request<span class="token punctuation">.</span><span class="token function">getParameter</span><span class="token punctuation">(</span><span class="token string">"start"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment" spellcheck="true">//每页的数据数</span>
        String length <span class="token operator">=</span> request<span class="token punctuation">.</span><span class="token function">getParameter</span><span class="token punctuation">(</span><span class="token string">"length"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment" spellcheck="true">//DT传递的draw:</span>
        String draw <span class="token operator">=</span> request<span class="token punctuation">.</span><span class="token function">getParameter</span><span class="token punctuation">(</span><span class="token string">"draw"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setStart</span><span class="token punctuation">(</span>Integer<span class="token punctuation">.</span><span class="token function">parseInt</span><span class="token punctuation">(</span>start<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setLength</span><span class="token punctuation">(</span>Integer<span class="token punctuation">.</span><span class="token function">parseInt</span><span class="token punctuation">(</span>length<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setDraw</span><span class="token punctuation">(</span>Integer<span class="token punctuation">.</span><span class="token function">parseInt</span><span class="token punctuation">(</span>draw<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment" spellcheck="true">//计算页码</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>page_num <span class="token operator">=</span> <span class="token punctuation">(</span>Integer<span class="token punctuation">.</span><span class="token function">parseInt</span><span class="token punctuation">(</span>start<span class="token punctuation">)</span> <span class="token operator">/</span> Integer<span class="token punctuation">.</span><span class="token function">parseInt</span><span class="token punctuation">(</span>length<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>

    <span class="token punctuation">}</span>

    <span class="token keyword">public</span> <span class="token function">DataTablePageUtil</span><span class="token punctuation">(</span><span class="token keyword">int</span> draw<span class="token punctuation">,</span> <span class="token keyword">int</span> start<span class="token punctuation">,</span> <span class="token keyword">int</span> length<span class="token punctuation">,</span> PageInfo pageInfo<span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>draw <span class="token operator">=</span> draw<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>start <span class="token operator">=</span> start<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>length <span class="token operator">=</span> length<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>data <span class="token operator">=</span> pageInfo<span class="token punctuation">.</span><span class="token function">getList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>page_num <span class="token operator">=</span> start <span class="token operator">/</span> length <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>page_size <span class="token operator">=</span> length<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>recordsTotal <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">int</span><span class="token punctuation">)</span>pageInfo<span class="token punctuation">.</span><span class="token function">getTotal</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>recordsFiltered <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>recordsTotal<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token comment" spellcheck="true">// Getter &amp; Setter</span>
<span class="token punctuation">}</span>
</code></pre>
<p>该类核心是这个构造方法,需要把<code>PageInfo</code>的数据重新赋值给<code>DataTablePageUtil</code>：</p>
<pre class=" language-java"><code class="language-java">    <span class="token keyword">public</span> <span class="token function">DataTablePageUtil</span><span class="token punctuation">(</span><span class="token keyword">int</span> draw<span class="token punctuation">,</span> <span class="token keyword">int</span> start<span class="token punctuation">,</span> <span class="token keyword">int</span> length<span class="token punctuation">,</span> PageInfo pageInfo<span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>draw <span class="token operator">=</span> draw<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>start <span class="token operator">=</span> start<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>length <span class="token operator">=</span> length<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>data <span class="token operator">=</span> pageInfo<span class="token punctuation">.</span><span class="token function">getList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>page_num <span class="token operator">=</span> start <span class="token operator">/</span> length <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>page_size <span class="token operator">=</span> length<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>recordsTotal <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">int</span><span class="token punctuation">)</span>pageInfo<span class="token punctuation">.</span><span class="token function">getTotal</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>recordsFiltered <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>recordsTotal<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</code></pre>
<p>Controller的实现:</p>
<pre class=" language-java"><code class="language-java">
<span class="token annotation punctuation">@RequestMapping</span><span class="token punctuation">(</span>value <span class="token operator">=</span> <span class="token string">"/user/list"</span><span class="token punctuation">,</span>method <span class="token operator">=</span> RequestMethod<span class="token punctuation">.</span>POST<span class="token punctuation">)</span>
    <span class="token annotation punctuation">@ResponseBody</span>
    <span class="token keyword">public</span> DataTablePageUtil<span class="token operator">&lt;</span>UserLog<span class="token operator">></span> <span class="token function">userOperateLogList</span><span class="token punctuation">(</span><span class="token annotation punctuation">@RequestParam</span><span class="token punctuation">(</span>required <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>defaultValue <span class="token operator">=</span> <span class="token string">"1"</span><span class="token punctuation">)</span> <span class="token keyword">int</span> draw<span class="token punctuation">,</span>
                                                         <span class="token annotation punctuation">@RequestParam</span><span class="token punctuation">(</span>required <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>defaultValue <span class="token operator">=</span> <span class="token string">"0"</span><span class="token punctuation">)</span> <span class="token keyword">int</span> start<span class="token punctuation">,</span>
                                                         <span class="token annotation punctuation">@RequestParam</span><span class="token punctuation">(</span>required <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>defaultValue <span class="token operator">=</span> <span class="token string">"10"</span><span class="token punctuation">)</span> <span class="token keyword">int</span> length<span class="token punctuation">,</span>
                                                         <span class="token annotation punctuation">@RequestParam</span><span class="token punctuation">(</span>required <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>defaultValue <span class="token operator">=</span> <span class="token string">"0"</span><span class="token punctuation">)</span> Integer userId<span class="token punctuation">,</span>
                                                         <span class="token annotation punctuation">@RequestParam</span><span class="token punctuation">(</span>required <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>defaultValue <span class="token operator">=</span> <span class="token string">"0"</span><span class="token punctuation">)</span> Integer type<span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>userId <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            userId <span class="token operator">=</span> null<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>type <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            type <span class="token operator">=</span> null<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        PageHelper<span class="token punctuation">.</span><span class="token function">startPage</span><span class="token punctuation">(</span>start<span class="token punctuation">,</span> length<span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">DataTablePageUtil</span><span class="token operator">&lt;</span><span class="token operator">></span><span class="token punctuation">(</span>draw<span class="token punctuation">,</span>start<span class="token punctuation">,</span>length<span class="token punctuation">,</span><span class="token keyword">new</span> <span class="token class-name">PageInfo</span><span class="token operator">&lt;</span><span class="token operator">></span><span class="token punctuation">(</span>logService<span class="token punctuation">.</span><span class="token function">listUserLog</span><span class="token punctuation">(</span>userId<span class="token punctuation">,</span>type<span class="token punctuation">)</span><span class="token punctuation">,</span>length<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</code></pre>
<p>当我们请求<code>/admin/log/user/list</code>的时候，获取到的数据：</p>
<pre class=" language-json"><code class="language-json"><span class="token punctuation">{</span>
    <span class="token property">"draw"</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token property">"start"</span><span class="token operator">:</span><span class="token number">0</span><span class="token punctuation">,</span>
    <span class="token property">"length"</span><span class="token operator">:</span><span class="token number">10</span><span class="token punctuation">,</span>
    <span class="token property">"search"</span><span class="token operator">:</span><span class="token null">null</span><span class="token punctuation">,</span>
    <span class="token property">"is_search"</span><span class="token operator">:</span><span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token property">"order"</span><span class="token operator">:</span><span class="token null">null</span><span class="token punctuation">,</span>
    <span class="token property">"order_dir"</span><span class="token operator">:</span><span class="token null">null</span><span class="token punctuation">,</span>
    <span class="token property">"columns_data"</span><span class="token operator">:</span><span class="token null">null</span><span class="token punctuation">,</span>
    <span class="token property">"columns_name"</span><span class="token operator">:</span><span class="token null">null</span><span class="token punctuation">,</span>
    <span class="token property">"columns_searchable"</span><span class="token operator">:</span><span class="token null">null</span><span class="token punctuation">,</span>
    <span class="token property">"is_orderable"</span><span class="token operator">:</span><span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token property">"columns_search_value"</span><span class="token operator">:</span><span class="token null">null</span><span class="token punctuation">,</span>
    <span class="token property">"is_search_regex"</span><span class="token operator">:</span><span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token property">"recordsTotal"</span><span class="token operator">:</span><span class="token number">42</span><span class="token punctuation">,</span>
    <span class="token property">"recordsFiltered"</span><span class="token operator">:</span><span class="token number">42</span><span class="token punctuation">,</span>
    <span class="token property">"data"</span><span class="token operator">:</span><span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
            <span class="token property">"id"</span><span class="token operator">:</span><span class="token number">43</span><span class="token punctuation">,</span>
            <span class="token property">"userId"</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
            <span class="token property">"userDisplayName"</span><span class="token operator">:</span><span class="token string">"FunGa黄佳"</span><span class="token punctuation">,</span>
            <span class="token property">"operateType"</span><span class="token operator">:</span><span class="token number">6</span><span class="token punctuation">,</span>
            <span class="token property">"remark"</span><span class="token operator">:</span><span class="token string">"上传文件：http://7xq0ls.com1.z0.glb.clouddn.com/FvponGiCwOeQ7qfZGrh7brYMGHj3"</span><span class="token punctuation">,</span>
            <span class="token property">"logTime"</span><span class="token operator">:</span><span class="token string">"2018-09-10T02:44:22.000+0000"</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
            <span class="token property">"id"</span><span class="token operator">:</span><span class="token number">42</span><span class="token punctuation">,</span>
            <span class="token property">"userId"</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
            <span class="token property">"userDisplayName"</span><span class="token operator">:</span><span class="token string">"FunGa黄佳"</span><span class="token punctuation">,</span>
            <span class="token property">"operateType"</span><span class="token operator">:</span><span class="token number">2</span><span class="token punctuation">,</span>
            <span class="token property">"remark"</span><span class="token operator">:</span><span class="token string">"新建文章:Myabtis批量插入返回自增主键"</span><span class="token punctuation">,</span>
            <span class="token property">"logTime"</span><span class="token operator">:</span><span class="token string">"2018-09-08T10:16:14.000+0000"</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
            <span class="token property">"id"</span><span class="token operator">:</span><span class="token number">41</span><span class="token punctuation">,</span>
            <span class="token property">"userId"</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
            <span class="token property">"userDisplayName"</span><span class="token operator">:</span><span class="token string">"FunGa黄佳"</span><span class="token punctuation">,</span>
            <span class="token property">"operateType"</span><span class="token operator">:</span><span class="token number">6</span><span class="token punctuation">,</span>
            <span class="token property">"remark"</span><span class="token operator">:</span><span class="token string">"上传文件：http://7xq0ls.com1.z0.glb.clouddn.com/Fv22YIygUx-MEuPVSUUCeAOD1YaG"</span><span class="token punctuation">,</span>
            <span class="token property">"logTime"</span><span class="token operator">:</span><span class="token string">"2018-09-08T09:56:35.000+0000"</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
            <span class="token property">"id"</span><span class="token operator">:</span><span class="token number">40</span><span class="token punctuation">,</span>
            <span class="token property">"userId"</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
            <span class="token property">"userDisplayName"</span><span class="token operator">:</span><span class="token string">"FunGa黄佳"</span><span class="token punctuation">,</span>
            <span class="token property">"operateType"</span><span class="token operator">:</span><span class="token number">2</span><span class="token punctuation">,</span>
            <span class="token property">"remark"</span><span class="token operator">:</span><span class="token string">"新建文章:为什么需要泛型？"</span><span class="token punctuation">,</span>
            <span class="token property">"logTime"</span><span class="token operator">:</span><span class="token string">"2018-09-08T06:20:53.000+0000"</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
            <span class="token property">"id"</span><span class="token operator">:</span><span class="token number">39</span><span class="token punctuation">,</span>
            <span class="token property">"userId"</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
            <span class="token property">"userDisplayName"</span><span class="token operator">:</span><span class="token string">"FunGa黄佳"</span><span class="token punctuation">,</span>
            <span class="token property">"operateType"</span><span class="token operator">:</span><span class="token number">6</span><span class="token punctuation">,</span>
            <span class="token property">"remark"</span><span class="token operator">:</span><span class="token string">"上传文件：http://7xq0ls.com1.z0.glb.clouddn.com/FlG--a1GubDWL3ghKzYlHxVJ3S4j"</span><span class="token punctuation">,</span>
            <span class="token property">"logTime"</span><span class="token operator">:</span><span class="token string">"2018-09-08T06:03:00.000+0000"</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
            <span class="token property">"id"</span><span class="token operator">:</span><span class="token number">38</span><span class="token punctuation">,</span>
            <span class="token property">"userId"</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
            <span class="token property">"userDisplayName"</span><span class="token operator">:</span><span class="token string">"FunGa黄佳"</span><span class="token punctuation">,</span>
            <span class="token property">"operateType"</span><span class="token operator">:</span><span class="token number">2</span><span class="token punctuation">,</span>
            <span class="token property">"remark"</span><span class="token operator">:</span><span class="token string">"新建文章:SpringBoot实现注解对请求进行权限验证"</span><span class="token punctuation">,</span>
            <span class="token property">"logTime"</span><span class="token operator">:</span><span class="token string">"2018-09-07T13:05:42.000+0000"</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
            <span class="token property">"id"</span><span class="token operator">:</span><span class="token number">37</span><span class="token punctuation">,</span>
            <span class="token property">"userId"</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
            <span class="token property">"userDisplayName"</span><span class="token operator">:</span><span class="token string">"FunGa黄佳"</span><span class="token punctuation">,</span>
            <span class="token property">"operateType"</span><span class="token operator">:</span><span class="token number">6</span><span class="token punctuation">,</span>
            <span class="token property">"remark"</span><span class="token operator">:</span><span class="token string">"上传文件：http://7xq0ls.com1.z0.glb.clouddn.com/FtoXMR8I_F79a5-VtYS08U91tV99"</span><span class="token punctuation">,</span>
            <span class="token property">"logTime"</span><span class="token operator">:</span><span class="token string">"2018-09-07T12:57:05.000+0000"</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
            <span class="token property">"id"</span><span class="token operator">:</span><span class="token number">36</span><span class="token punctuation">,</span>
            <span class="token property">"userId"</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
            <span class="token property">"userDisplayName"</span><span class="token operator">:</span><span class="token string">"FunGa黄佳"</span><span class="token punctuation">,</span>
            <span class="token property">"operateType"</span><span class="token operator">:</span><span class="token number">3</span><span class="token punctuation">,</span>
            <span class="token property">"remark"</span><span class="token operator">:</span><span class="token string">"编辑专题：搞定面试，内容：面试题其实有时候很恶心的，因为如果不是有所准备，真的可能答不上来，或者说一个资深的老程序员也未必答得上来，但是如果能答上来，那必然是加分的呀。"</span><span class="token punctuation">,</span>
            <span class="token property">"logTime"</span><span class="token operator">:</span><span class="token string">"2018-09-07T12:42:48.000+0000"</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
            <span class="token property">"id"</span><span class="token operator">:</span><span class="token number">35</span><span class="token punctuation">,</span>
            <span class="token property">"userId"</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
            <span class="token property">"userDisplayName"</span><span class="token operator">:</span><span class="token string">"FunGa黄佳"</span><span class="token punctuation">,</span>
            <span class="token property">"operateType"</span><span class="token operator">:</span><span class="token number">3</span><span class="token punctuation">,</span>
            <span class="token property">"remark"</span><span class="token operator">:</span><span class="token string">"创建专题：搞定面试，内容：面试题其实有时候很恶习的，因为如果不是有所准备，真的可能答不上来，或者说一个资深的老程序员也未必答得上来，但是如果能答上来，那必然是加分的呀。"</span><span class="token punctuation">,</span>
            <span class="token property">"logTime"</span><span class="token operator">:</span><span class="token string">"2018-09-07T12:41:36.000+0000"</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
            <span class="token property">"id"</span><span class="token operator">:</span><span class="token number">34</span><span class="token punctuation">,</span>
            <span class="token property">"userId"</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
            <span class="token property">"userDisplayName"</span><span class="token operator">:</span><span class="token string">"FunGa黄佳"</span><span class="token punctuation">,</span>
            <span class="token property">"operateType"</span><span class="token operator">:</span><span class="token number">6</span><span class="token punctuation">,</span>
            <span class="token property">"remark"</span><span class="token operator">:</span><span class="token string">"上传文件：http://7xq0ls.com1.z0.glb.clouddn.com/FutQ0kGzuwmKPLtWWzPo_RXx6r1n"</span><span class="token punctuation">,</span>
            <span class="token property">"logTime"</span><span class="token operator">:</span><span class="token string">"2018-09-07T12:39:16.000+0000"</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token property">"error"</span><span class="token operator">:</span><span class="token null">null</span><span class="token punctuation">,</span>
    <span class="token property">"dt_rowId"</span><span class="token operator">:</span><span class="token null">null</span><span class="token punctuation">,</span>
    <span class="token property">"dt_rowClass"</span><span class="token operator">:</span><span class="token null">null</span><span class="token punctuation">,</span>
    <span class="token property">"dt_rowData"</span><span class="token operator">:</span><span class="token null">null</span><span class="token punctuation">,</span>
    <span class="token property">"dt_rowAttr"</span><span class="token operator">:</span><span class="token null">null</span><span class="token punctuation">,</span>
    <span class="token property">"page_num"</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token property">"page_size"</span><span class="token operator">:</span><span class="token number">10</span>
<span class="token punctuation">}</span>
</code></pre>
<h2 id="前端分页"><a href="#前端分页" class="headerlink" title="前端分页"></a>前端分页</h2><p>展示页面和查询条件:</p>
<pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>box-header with-border<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>box-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-inline pull-right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>box-body<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-group<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>user-id<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>control-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>操作人：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>
                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>user-id<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">width</span><span class="token punctuation">:</span><span class="token number">160</span>px</span><span class="token punctuation">"</span></span> <span class="token attr-name">onchange</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>redraw()<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>请选择...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name"><span class="token namespace">th:</span>each</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>user,userStat : ${userList}<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">th:</span>value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>${user.id}<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">th:</span>text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>${user.displayName}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span>
                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">></span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
                        <span class="token entity" title="&nbsp;">&amp;nbsp;</span><span class="token entity" title="&nbsp;">&amp;nbsp;</span><span class="token entity" title="&nbsp;">&amp;nbsp;</span><span class="token entity" title="&nbsp;">&amp;nbsp;</span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-group<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>type<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>control-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>操作类型：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>
                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>type<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">width</span><span class="token punctuation">:</span><span class="token number">160</span>px</span><span class="token punctuation">"</span></span> <span class="token attr-name">onchange</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>redraw()<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>请选择...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>操作用户<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>操作文章<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>操作专题<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>操作课程<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>操作评论<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>操作图片<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>7<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>作者回复<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span>
                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">></span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">></span></span>

                <span class="token comment" spellcheck="true">&lt;!-- /.box-header --></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>box-body<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>100%<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>user-log-table<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>table table-bordered<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>thead</span><span class="token punctuation">></span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">10</span>px</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>#<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">></span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">60</span>px</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>操作人<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">></span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">60</span>px</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>操作类型<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">></span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">240</span>px</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>操作内容<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">></span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">120</span>px</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>时间<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">></span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>thead</span><span class="token punctuation">></span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tbody</span><span class="token punctuation">></span></span>

                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tbody</span><span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
                <span class="token comment" spellcheck="true">&lt;!-- /.box-body --></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
</code></pre>
<p>我们定义了一个数据table，和一个简单的数据过滤form表单。</p>
<p>jquery生成分页：</p>
<pre class=" language-javascript"><code class="language-javascript"><span class="token operator">&lt;</span>script<span class="token operator">></span>

  <span class="token keyword">var</span> dt<span class="token punctuation">;</span>


  <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token function">drawTable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>

  <span class="token keyword">function</span> <span class="token function">drawTable</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      dt <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#user-log-table'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">DataTable</span><span class="token punctuation">(</span> <span class="token punctuation">{</span>
          processing<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
          serverSide<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
          lengthChange<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><span class="token comment" spellcheck="true">//是否允许用户改变表格每页显示的记录数</span>
          ordering<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><span class="token comment" spellcheck="true">//是否允许用户排序</span>
          paging<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><span class="token comment" spellcheck="true">//是否分页</span>
          <span class="token keyword">async</span><span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
          pagingType<span class="token punctuation">:</span> <span class="token string">"full_numbers"</span><span class="token punctuation">,</span><span class="token comment" spellcheck="true">//除首页、上一页、下一页、末页四个按钮还有页数按钮</span>
        <span class="token comment" spellcheck="true">/* scrollX: true,//允许水平滚动
         scrollY: "200px",
         scrollCollapse: true, */</span>
          searching<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><span class="token comment" spellcheck="true">//是否开始本地搜索</span>
          stateSave<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><span class="token comment" spellcheck="true">//刷新时是否保存状态</span>
          autoWidth<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><span class="token comment" spellcheck="true">//自动计算宽度</span>
          <span class="token comment" spellcheck="true">//deferRender : true,//延迟渲染</span>
          language<span class="token punctuation">:</span> <span class="token punctuation">{</span>
              <span class="token string">"lengthMenu"</span><span class="token punctuation">:</span> <span class="token string">"每页 _MENU_ 条记录"</span><span class="token punctuation">,</span>
              <span class="token string">"zeroRecords"</span><span class="token punctuation">:</span> <span class="token string">" "</span><span class="token punctuation">,</span>
              <span class="token string">"info"</span><span class="token punctuation">:</span> <span class="token string">"当前 _START_ 条到 _END_ 条 共 _TOTAL_ 条"</span><span class="token punctuation">,</span>
              <span class="token string">"infoEmpty"</span><span class="token punctuation">:</span> <span class="token string">"无记录"</span><span class="token punctuation">,</span>
              <span class="token string">"infoFiltered"</span><span class="token punctuation">:</span> <span class="token string">"(从 _MAX_ 条记录过滤)"</span><span class="token punctuation">,</span>
              <span class="token comment" spellcheck="true">// "search": "用户",</span>
              <span class="token comment" spellcheck="true">// "processing": "载入中",</span>
              <span class="token string">"paginate"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
                  <span class="token string">"first"</span><span class="token punctuation">:</span> <span class="token string">"首页"</span><span class="token punctuation">,</span>
                  <span class="token string">"previous"</span><span class="token punctuation">:</span> <span class="token string">"上一页"</span><span class="token punctuation">,</span>
                  <span class="token string">"next"</span><span class="token punctuation">:</span> <span class="token string">"下一页"</span><span class="token punctuation">,</span>
                  <span class="token string">"last"</span><span class="token punctuation">:</span> <span class="token string">"尾页"</span>
              <span class="token punctuation">}</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          fnDrawCallback<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
              <span class="token keyword">var</span> api <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">api</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
              <span class="token keyword">var</span> startIndex <span class="token operator">=</span> api<span class="token punctuation">.</span>context<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>_iDisplayStart<span class="token punctuation">;</span>
              api<span class="token punctuation">.</span><span class="token function">column</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">nodes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>cell<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                  cell<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> startIndex <span class="token operator">+</span> i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
              <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          ajax<span class="token punctuation">:</span> <span class="token punctuation">{</span>
              url<span class="token punctuation">:</span> <span class="token string">'/admin/log/user/list'</span><span class="token punctuation">,</span>
              type<span class="token punctuation">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
              data<span class="token punctuation">:</span><span class="token punctuation">{</span>userId<span class="token punctuation">:</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#user-id'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>type<span class="token punctuation">:</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#type'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          columns<span class="token punctuation">:</span> <span class="token punctuation">[</span>
              <span class="token punctuation">{</span>
                  data<span class="token punctuation">:</span> <span class="token keyword">null</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
              <span class="token punctuation">{</span>
                  data<span class="token punctuation">:</span> <span class="token string">"userDisplayName"</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
              <span class="token punctuation">{</span>
                  data<span class="token punctuation">:</span> <span class="token string">"operateType"</span><span class="token punctuation">,</span>
                  render <span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                      <span class="token keyword">switch</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">{</span>
                          <span class="token keyword">case</span> <span class="token number">1</span><span class="token punctuation">:</span>
                              <span class="token keyword">return</span> <span class="token string">"操作用户"</span><span class="token punctuation">;</span>
                          <span class="token keyword">case</span> <span class="token number">2</span><span class="token punctuation">:</span>
                              <span class="token keyword">return</span> <span class="token string">"操作文章"</span><span class="token punctuation">;</span>
                          <span class="token keyword">case</span> <span class="token number">3</span><span class="token punctuation">:</span>
                              <span class="token keyword">return</span> <span class="token string">"操作专题"</span><span class="token punctuation">;</span>
                          <span class="token keyword">case</span> <span class="token number">4</span><span class="token punctuation">:</span>
                              <span class="token keyword">return</span> <span class="token string">"操作课程"</span><span class="token punctuation">;</span>
                          <span class="token keyword">case</span> <span class="token number">5</span><span class="token punctuation">:</span>
                              <span class="token keyword">return</span> <span class="token string">"操作评论"</span><span class="token punctuation">;</span>
                          <span class="token keyword">case</span> <span class="token number">6</span><span class="token punctuation">:</span>
                              <span class="token keyword">return</span> <span class="token string">"操作文件"</span><span class="token punctuation">;</span>
                          <span class="token keyword">case</span> <span class="token number">7</span><span class="token punctuation">:</span>
                              <span class="token keyword">return</span> <span class="token string">"作者回复"</span><span class="token punctuation">;</span>
                          <span class="token keyword">default</span><span class="token punctuation">:</span>
                              <span class="token keyword">return</span> <span class="token string">"未知类型"</span><span class="token punctuation">;</span>
                      <span class="token punctuation">}</span>
                  <span class="token punctuation">}</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
              <span class="token punctuation">{</span>data<span class="token punctuation">:</span> <span class="token string">"remark"</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
              <span class="token punctuation">{</span>
                  data<span class="token punctuation">:</span> <span class="token string">"logTime"</span><span class="token punctuation">,</span>
                  render<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">Format</span><span class="token punctuation">(</span><span class="token string">"yyyy-MM-dd hh:mm:ss"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                  <span class="token punctuation">}</span>
              <span class="token punctuation">}</span>
          <span class="token punctuation">]</span>
      <span class="token punctuation">}</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">function</span> <span class="token function">redraw</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span><span class="token punctuation">(</span>dt<span class="token punctuation">)</span><span class="token punctuation">{</span>
          dt<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          dt<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token function">drawTable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
</code></pre>
<p>当页面加载的时候，按照默认的参数请求接口获取分页数据。当选择了条件，把原先分页销毁，重新带参数请求接口生成新的分页对象。</p>

      
    </div>
    <footer class="entry-meta entry-footer">
      
	<span class="ico-folder"></span>
    <a class="article-category-link" href="/categories/开发小招/">开发小招</a>

      
  <span class="ico-tags"></span>
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/分页/">分页</a></li></ul>

      
        <div id="donation_div"></div>

<script src="/js/vdonate.js"></script>
<script>
var a = new Donate({
  title: '如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作!', // 可选参数，打赏标题
  btnText: 'Donate', // 可选参数，打赏按钮文字
  el: document.getElementById('donation_div'),
  wechatImage: 'https://funga.oss-cn-beijing.aliyuncs.com/config/wechat_pay_code.jpg',
  alipayImage: 'https://funga.oss-cn-beijing.aliyuncs.com/config/alipay_code.png'
});
</script>
      
            
      
        <!--PC版-->
<div id="SOHUCS"></div>
<!-- <script charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/changyan.js" ></script> -->
<script charset="utf-8" type="text/javascript" src="https://funga.oss-cn-beijing.aliyuncs.com/static/changyan.js"></script>
<script type="text/javascript">
window.changyan.api.config({
appid: 'cyrV0wIGI',
conf: 'prod_3d29a99dcddb3782e98f1fa951b9868f'
});
</script>
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2018/10/10/sp-e/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          Java Web项目全局异常捕获实现
        
      </div>
    </a>
  
  
    <a href="/2018/02/20/mybatis-incr-key/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">Myabtis批量插入返回自增主键</div>
    </a>
  
</nav>

  
</article>

<!-- Table of Contents -->

  <aside id="sidebar">
    <div id="toc" class="toc-article" style="overflow-y: scroll; max-width: 28%;">
    <strong class="toc-title">Contents</strong>
    
      <ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#后端数据实现"><span class="nav-number">1.</span> <span class="nav-text">后端数据实现</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#前端分页"><span class="nav-number">2.</span> <span class="nav-text">前端分页</span></a></li></ol>
    
    </div>
  </aside>
</section>
        
      </div>
      <footer id="footer" class="site-footer">
  

  <div class="clearfix container">
      <div class="site-info">
	      &copy; 2019 FunGa技术札记 All Rights Reserved.
          
            <span id="busuanzi_container_site_uv">
              本站访客数<span id="busuanzi_value_site_uv"></span>人次  
              本站总访问量<span id="busuanzi_value_site_pv"></span>次
            </span>
          
      </div>
      <div class="site-credit">
        Theme by <a href="https://github.com/iTimeTraveler/hexo-theme-hiero" target="_blank">hiero</a>
      </div>
  </div>
</footer>


<!-- min height -->

<script>
    var contentdiv = document.getElementById("content");

    contentdiv.style.minHeight = document.body.offsetHeight - document.getElementById("allheader").offsetHeight - document.getElementById("footer").offsetHeight + "px";
</script>

<!-- Custome JS -->
<script src="/js/my.js"></script>
    </div>
    <!-- <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
    <a href="/categories" class="mobile-nav-link">Categories</a>
  
    <a href="/tags" class="mobile-nav-link">Tags</a>
  
    <a href="/about" class="mobile-nav-link">About</a>
  
</nav> -->
    

<!-- mathjax config similar to math.stackexchange -->

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      processEscapes: true
    }
  });
</script>

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: {
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
      }
    });
</script>

<script type="text/x-mathjax-config">
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for(i=0; i < all.length; i += 1) {
            all[i].SourceElement().parentNode.className += ' has-jax';
        }
    });
</script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>



  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>


<script src="/js/scripts.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/js/main.js"></script>







  <div style="display: none;">
    <script src="https://s95.cnzz.com/z_stat.php?id=1260716016&web_id=1260716016" language="JavaScript"></script>
  </div>



	<script async src="https://dnqof95d40fo6.cloudfront.net/atw7f8.js">
	</script>






  </div>

  <a id="rocket" href="#top" class=""></a>
  <script type="text/javascript" src="/js/totop.js" async=""></script>
</body>
</html>
